<template>
	<div class="modal-wrapper">
		<div id="loadingDiv" class="loadingDiv" style="display:none" ref="loadingDiv">
            <p>加载中</p>
        </div>
		<div class="row" style="padding-top:10px;">
            <p id="TelephonePrompt" class="text_ts xm_tip col-xs-7 font-size-14">{{telephonePrompt}}</p>
        </div>
        <div id="border1" ref="border1" class="borderRadius" style="border:1px solid #00a1e9; height: 38px;width: 280px;">
          <img src="../../../images/PassPort.png" class="pos-fixd">
          <input id="txtName" class="xm_telephone" type="tel" style="outline:none;border:0px;position: relative;margin-left: 40px;" @keyup="keyupUserName"  v-model="formAction.username" autofocus="autofocus" @focus="focusUserName" @blur="blurUserName" placeholder="请输入您的手机号码">
        </div>
        <div id="border2" ref="border2" class="borderRadius" style="border:1px solid #C1C6C7; height: 38px;width: 280px;margin-top: 10px;">
          <img src="../../../images/PassWord.png" class="pos-fixd">
          <input class="xm_password" type="password" id="pswPassword" v-model="formAction.password" style="outline:none;border:0px;position: relative;" maxlength="20" @focus="focusPwd" @blur="blurPwd" placeholder="请输入您的密码">
        </div>
        <div class="row" style="width:100%;margin-top: 5px;">
            <div id="PasswordPrompt" class="text_ts xm_tip col-xs-7 font-size-14" style="margin-top: 0px;">{{passwordPrompt}}</div>
        </div>
        <p class="row row-fixed pointer borderRadius" ondragstart="return false;">
			<span  class="xm_login_btn col-xs-122" id="login" @click="submitLogin" @keyup.enter="submitLogin">登  录</span>
		</p>
		<div :class="isRemPwd ? 'selectedImg_Psw' : 'defaultImg_Psw'" id="remPwd" ref="remPwd" @click="remPwdclick" style="padding-left:26px;line-height:20px; margin:2px 0px 2px 0px;margin-top: 10px;width:100px;cursor: pointer;font-size: 14px;">
            <span>记住密码</span>
        </div>
        <span class="xm_password_btn col-fixed pointer textColor textL" id="userGetBackPsw">忘记密码</span>
		<p id="RegisterAndFindBack" class="LoginSet row row-fixed font-size-min pos-in-bottom1 margin-bottom-fixed" ondragstart="return false;">
            <span id="Register1" class="textColor2">{{registerHtml}}</span>
			<span class="xm_Register_btn col-fixed pointer textColor" id="userRegister">快捷登录注册</span>
		</p>
	</div>
    <!--<div class="loginForm">
        <div id="loadingDiv" class="loadingDiv" style="display:none" ref="loadingDiv">
            <p>加载中</p>
        </div>
        <ul class="loginUl">
            <li>
                <label>
                    <div class="phone">
                        <img src="../../../images/ksbao/phoneL.png?v=123" alt="手机" />
                    </div>
                    <input type="text" v-model="formAction.username" placeholder="输入账号/手机号" class="txtValue" />
                </label>
            </li>
            <li>
                <label>
                    <div>
                        <img src="../../../images/ksbao/mima.png?v=123" alt="手机" />
                    </div>
                    <input type="password" v-show="darkBright" v-model="formAction.password" placeholder="输入密码" />
                    <input type="text" v-show="!darkBright" v-model="formAction.password" placeholder="输入密码" />
                    <em @click="showPWDText"><img src="../../../images/ksbao/pwdshow.png" alt="显示密码" ref="darkBrightImg" /></em>
                </label>
            </li>
        </ul>
        <button class="button_login" @click="submitLogin">登录</button>
        <div class="btnMenuFooter">
            <i id='forget_psw' @click="forgetPWD" style="width: auto; float: right">忘记密码?</i>
        </div>
    </div>-->
</template>
<script>
import { getCookie } from '../../../config/mUtils'
import {checkUser, userLogin } from "../../../config/getData"
import md5 from '../../plugins/md5'
import {upSubject} from "../../../config/yingPrg"
export default {
    data: function() {
        return {
            isPossibleSubmit: true, // 是否可提交
            userInfo: null, // 获取到的用户信息
            formAction: { // 表单
                username: '',
                password: ''
            },
            isRemPwd:false,//是否记住密码
            darkBright: true, // 是否显示明文密码
            registerHtml:'还没有考试宝典账号？',
            telephonePrompt:'', // 用户名提示信息
            passwordPrompt:'' // 用户密码提示信息
        }
    },
    methods: {
        showPWDText(event) {
            // 显示隐藏密码
            this.darkBright = !this.darkBright;
            this.$refs.darkBrightImg.src = this.darkBright ? require('images/ksbao/pwdshow.png') : require('images/ksbao/pwdhide.png');
        },
        keyupUserName(){
        	if(this.formAction.username !== localStorage.getItem('username')) {
				this.formAction.password = '';
			}
        },
        async submitLogin() {
            // 登录
            var _that = this;
            if(!this.checkSpacial()){
            	return;
            }
            if (!this.checkUserName()) {
				return;
			}
            let userPassword = _that.formAction.password;
            let cookiePwd = localStorage.getItem('password');
            let userPasswordMd5 = ''; //hex_md5(userPassword);
            let pwdArr = null;
			if(cookiePwd){
				pwdArr = cookiePwd.split(',');
			}
			if(cookiePwd && pwdArr && userPassword === pwdArr[0].substring(0,Number(pwdArr[1]))){
				userPasswordMd5 = pwdArr[0];
			} else {
				if (!this.checkPwd()) {
					return;
				}
				userPasswordMd5 = md5.hex_md5(userPassword);
			}
			// this.$emit('openMask1','show');
			// return
            await checkUser(_that.formAction.username).then(res=>{
            	if(!res){
            		_that.$vux.throw.show({ text: '请求服务器[/api/user/checkUser]接口无返回' });
            		return
            	}
            	if(res.status === 201 ){
            		_that.telephonePrompt = '该账号未注册，请先注册！';
            		_that.$refs.loadingDiv.style.display = 'none';
            	}
            	if(res.status === 200 ){
            		
            	}
            })
            
            if (_that.isPossibleSubmit) {
                _that.isPossibleSubmit = false;  // 防止重复提交
                _that.$refs.loadingDiv.style.display = 'block';
                // 登录接口
                _that.userInfo = await userLogin(_that.formAction.username, userPasswordMd5);
                let res = _that.userInfo
                if (this.userInfo.status === 200) {
                    localStorage.setItem('username', _that.formAction.username);
                    localStorage.setItem('guid', res.data.guid);
                    localStorage.setItem('userID', res.data.userID);
                    localStorage.setItem('NickName', res.data.NickName);
                    if(_that.isRemPwd){
                    	localStorage.setItem('password', userPasswordMd5 + ',' + userPassword.length);
                    }else{
                    	localStorage.removeItem('password');
                    }
                    let jsonData = res.data;
                    if(jsonData.appID){
                    	jsonData.AppID = jsonData.appID;
                    }
                    if(jsonData.appName){
                    	jsonData.AppName = jsonData.appName;
                    }
                    if(jsonData.appEName){
                    	jsonData.AppEName = jsonData.appEName;
                    }
                    if(jsonData.appCName){
                    	jsonData.Name = jsonData.appCName;
                    }
                    if(jsonData.appVn){
                    	jsonData.vn = jsonData.appVn;
                    }
                    
                    if(!jsonData.AppID){
                    	this.$emit('openMask1','df');
//                  	this.recv('loginMenu','nobtn','账号密码登录',['330px','330px'])
                    }else{
                    	this.$emit('openMask1','show');
//                  	this.recv('loginMenu','nobtn','账号密码登录',['330px','330px'])
//                  	await upSubject(jsonData).then(ress=>{
//	                    	_that.$router.push('/mainIndex');
//	                    })
                    }
                    
//                  loginSuccess(res);
//                  _that.$router.push('/selectsub');
                } else if (res.status === 201) {
                    _that.resetLoginAction();
                    _that.$vux.alert.show({ text: res.msg });
                }
            }
        },
        forgetPWD() {
            // 忘记密码
            this.$router.push('/forgetpwd');
        },
        resetLoginAction() {
            // 重置登录状态
            var _that = this;
            _that.formAction.password = '';
            _that.isPossibleSubmit = true;  // 防止重复提交
            _that.$refs.loadingDiv.style.display = 'none';
        },
        remPwdclick(){
        	this.isRemPwd = !this.isRemPwd;
        	this.$refs.remPwd.style.className = this.isRemPwd ? 'selectedImg_Psw' : 'defaultImg_Psw';
        	localStorage.setItem("remPwd",this.isRemPwd);
        },
        focusUserName(){
        	this.$refs.border1.style.border = '1px solid #00a1e9';
        },
        blurUserName(){
        	this.$refs.border1.style.border = '1px solid #C1C6C7';
        	this.checkUserName();
        },
        focusPwd(){
        	this.$refs.border2.style.border = '1px solid #00a1e9';
        },
        blurPwd(){
        	this.$refs.border2.style.border = '1px solid #C1C6C7';
        	this.checkPwd();
        },
        checkUserName(){
        	let _that = this;
        	let userName = _that.formAction.username;
			if (!userName) {
				_that.$refs.border1.style.border = '1px solid #FF4251';
				_that.telephonePrompt = '手机号不能为空';
				return false;
			}
			//清空提示框
			_that.telephonePrompt = '';
			return true;
        },
        checkPwd(){
        	let _that = this;
        	var userPassword = _that.formAction.password;
			if (!userPassword) {
				_that.$refs.border2.style.border = '1px solid #FF4251';
				_that.passwordPrompt = '请输入密码';
				return false;
			}
			if (userPassword.length < 6 || userPassword.length > 20) {
				_that.$refs.border2.style.border = '1px solid #FF4251';
				_that.passwordPrompt = '密码长度必须为6-20个字符';
				return false;
			}
			_that.passwordPrompt = '';
			return true;
        },
        checkSpacial() {
            let _that = this;
        	let userName = _that.formAction.username;
            let flag=false;
            let spacialArry=['%','\\','?','/'];
            for(var i in spacialArry){
                if(userName.indexOf(spacialArry[i])>=0){
                    flag=true;
                }
            }
            if (flag) {
				this.$refs.border2.style.border = '1px solid #FF4251';
                _that.telephonePrompt = '不能包含'+spacialArry.join('')+'等特殊字符';
                return false;
            }
            _that.telephonePrompt = '';
            return true;
        }
        
    },
    created: function() {
        let _that = this;
        if (localStorage.getItem('guid')) {
            this.formAction.username = localStorage.getItem('username');
            let userPwd = localStorage.getItem('password');
            if(userPwd){
            	let pwdArr = userPwd.split(',');
				this.formAction.password = pwdArr[0].substring(0,Number(pwdArr[1]));
				_that.isRemPwd = true;
            }
        } else {
            localStorage.removeItem('guid');
            localStorage.removeItem('username');
            localStorage.removeItem('password');
            localStorage.removeItem('userID');
        }
        let agentCode = getCookie('AGENTCODE');
        if(agentCode === '021028'){
            _that.registerHtml = '还没有优启点题通账号？';
        }
        if(agentCode === '076901'){
            _that.registerHtml = '还没博大考典账号？';
        }
        if(agentCode === '057303'){
            _that.registerHtml = '还没贤仕考典账号？';
        }
		document.onkeydown = function(e) {
			let event = window.event || e;
			let key = event.keyCode || event.which;
			if (key == 13) {
				_that.submitLogin();
			}
		}
    }
}

</script>
<style scope lang="less">


</style>

